
<script setup lang="ts">
import { ref, onMounted, watch } from 'vue';
import { Api } from '../../assets/api';
import type { Items, LivesList } from '../../typings'
import LiveCred from '../../components/LiveComp/LiveCred.vue'
import LoadingComp from '../../components/LoadingComp/LoadingComp.vue'
onMounted(() => {
    getLiveTabData()
    getLiveIngList()
})

const liveTabIndex = ref(1)
const tabs = ref<Array<Items>>()
const getLiveTabData = async () => {
    let { data } = await Api.getLiveTab()
    tabs.value = data.data.tabs.items
    // console.log(tabs.value);
    tabs.value.unshift({
        name: '关注',
        id: 10086,
        platform: 1,
        active: true
    })


}

const livingList = ref<Array<LivesList>>()
// const historyLiveList = ref([])
const getLiveIngList = async (tabId: number = 1, page: number = 1) => {


    livingList.value = []
    let { data } = await Api.getLivingList(tabId, page)
    livingList.value = data.data.lives
    console.log(livingList.value);

    // historyLiveList.value.push({
    //     [tabId]: livingList.value
    // })

    // console.log(historyLiveList.value);

}

const isFollow = ref(false)

watch(() => liveTabIndex.value, (n, o) => {
    if (n != o) {
        getLiveIngList(tabs.value[n].id)
        if (tabs.value[n].id == tabs.value[0].id) {
            isFollow.value = true
        }else {
            isFollow.value = false
        }
    }
})

</script>

<template>
    <div class="live-view">
        <div class="live-tab">
            <van-tabs v-model:active="liveTabIndex" sticky swipeable>
                <van-tab v-for="t in tabs" :title="t.name" :key="t.id">
                    <div class="list-com " style=" min-height: 60vh;">
                        <LiveCred :list="item" v-for="item in livingList" :key="item.actUserId"></LiveCred>
                        <LoadingComp :type="1" v-show="livingList.length == 0 && !isFollow" />
                        <van-empty v-show="isFollow" image="https://fastly.jsdelivr.net/npm/@vant/assets/custom-empty-image.png"
                            image-size="80" description="内容为空" />

                    </div>

                </van-tab>
            </van-tabs>

        </div>
    </div>
</template>


<style lang="scss" scoped>
.live-view {
    width: 100vw;
    height: 93vh;
    position: fixed;
    left: 0;
    top: 0;
    background-color: #f6f6f6;
    z-index: 10;
    overflow-y: auto;
}
</style>